<template>
  <div class="card-content">
    <div class="stat-groups">
      <div class="stat-group">
        <div class="stat stat1"></div>
        <div v-if="dateType == 'DAY'" class="content">
          <div class="title">昨日缺失上报</div>
          <div class="count" @click="toDefectPage(1)">
            {{
              chartsData?.missingStatisticsMap?.YESTERDAY_MISSING_REPORT == 0
                ? 0
                : chartsData?.missingStatisticsMap?.YESTERDAY_MISSING_REPORT
                  ? chartsData?.missingStatisticsMap?.YESTERDAY_MISSING_REPORT
                  : "-"
            }}
          </div>
        </div>
        <div v-else class="content" @click="toDefectPage(2)">
          <div class="title">缺失上报</div>
          <div class="count">
            {{
              chartsData?.missingStatisticsMap?.MISSING_REPORT == 0
                ? 0
                : chartsData?.missingStatisticsMap?.MISSING_REPORT
                  ? chartsData?.missingStatisticsMap?.MISSING_REPORT
                  : "-"
            }}
          </div>
        </div>
      </div>
      <div class="stat-group">
        <div class="stat stat2"></div>
        <div v-if="dateType == 'DAY'" class="content" @click="toDefectPage(3)">
          <div class="title">昨日整改完成</div>
          <div class="count">
            {{
              chartsData?.missingStatisticsMap?.YESTERDAY_RECTIFY_DONE == 0
                ? 0
                : chartsData?.missingStatisticsMap?.YESTERDAY_RECTIFY_DONE
                  ? chartsData?.missingStatisticsMap?.YESTERDAY_RECTIFY_DONE
                  : "-"
            }}
          </div>
        </div>
        <div v-else class="content" @click="toDefectPage(4)">
          <div class="title">整改完成</div>
          <div class="count">
            {{
              chartsData?.missingStatisticsMap?.RECTIFY_DONE == 0
                ? 0
                : chartsData?.missingStatisticsMap?.RECTIFY_DONE
                  ? chartsData?.missingStatisticsMap?.RECTIFY_DONE
                  : "-"
            }}
          </div>
        </div>
      </div>
    </div>
    <div class="stat-groups">
      <div class="stat-group">
        <div class="stat stat3"></div>
        <div class="content" @click="toDefectPage(5)">
          <div class="title">当前缺失数量</div>
          <div class="count">
            {{
              chartsData?.missingStatisticsMap?.CURRENT_MISSING == 0
                ? 0
                : chartsData?.missingStatisticsMap?.CURRENT_MISSING
                  ? chartsData?.missingStatisticsMap?.CURRENT_MISSING
                  : "-"
            }}
          </div>
        </div>
      </div>
      <div class="stat-group">
        <div class="stat stat4"></div>
        <div class="content" @click="toDefectPage(6)">
          <div class="title">当前待响应</div>
          <div class="count">
            {{
              chartsData?.missingStatisticsMap?.CURRENT_UNRESPONSE_MISSING == 0
                ? 0
                : chartsData?.missingStatisticsMap?.CURRENT_UNRESPONSE_MISSING
                  ? chartsData?.missingStatisticsMap?.CURRENT_UNRESPONSE_MISSING
                  : "-"
            }}
          </div>
        </div>
      </div>
    </div>
    <div class="stat-groups">
      <div class="stat-group">
        <div class="stat stat5"></div>
        <div class="content" @click="toDefectPage(7)">
          <div class="title">当前待整改</div>
          <div class="count">
            {{
              chartsData?.missingStatisticsMap?.CURRENT_UNDO_MISSING == 0
                ? 0
                : chartsData?.missingStatisticsMap?.CURRENT_UNDO_MISSING
                  ? chartsData?.missingStatisticsMap?.CURRENT_UNDO_MISSING
                  : "-"
            }}
          </div>
        </div>
      </div>
      <div class="stat-group">
        <div class="stat stat6"></div>
        <div class="content" @click="toDefectPage(8)">
          <div class="title">当前延期整改</div>
          <div class="count">
            {{
              chartsData?.missingStatisticsMap?.CURRENT_DELAY_MISSING == 0
                ? 0
                : chartsData?.missingStatisticsMap?.CURRENT_DELAY_MISSING
                  ? chartsData?.missingStatisticsMap?.CURRENT_DELAY_MISSING
                  : "-"
            }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import dayjs from "dayjs";
const router = useRouter();

const props = defineProps({
  chartsData: {
    type: Object,
    required: true
  },
  className: {
    type: String,
    default: ""
  },
  startTime: {
    type: String,
    default: ""
  },
  endTime: {
    type: String,
    default: ""
  }
});
// 跳转到缺失页面
const toDefectPage = type => {
  if (type === 1) {
    // 昨日缺失上报
    const startTime = dayjs().subtract(1, "day").format("YYYY-MM-DD 00:00:00");
    const endTime = dayjs().subtract(1, "day").format("YYYY-MM-DD 23:59:59");
    router.push(`/all/safeManage/defect?className=${props.className}&startTime=${startTime}&endTime=${endTime}`);
  } else if (type === 2) {
    // 缺失上报
    router.push(`/all/safeManage/defect?className=${props.className}&startTime=${props.startTime}&endTime=${props.endTime}`);
  } else if (type === 3) {
    // 昨日整改完成
    const finishStartTime = dayjs().subtract(1, "day").format("YYYY-MM-DD 00:00:00");
    const finishEndTime = dayjs().subtract(1, "day").format("YYYY-MM-DD 23:59:59");
    router.push(
      `/all/safeManage/defect?className=${props.className}&finishStartTime=${finishStartTime}&finishEndTime=${finishEndTime}&status=DONE-FINISHED`
    );
  } else if (type === 4) {
    // 整改完成
    router.push(
      `/all/safeManage/defect?className=${props.className}&finishStartTime=${props.startTime}&finishEndTime=${props.endTime}&status=DONE-FINISHED`
    );
  } else if (type === 5) {
    // 当前缺失数量
    router.push(`/all/safeManage/defect?className=${props.className}&status=UNRESPONSE-UNDO-DOING-DELAY`);
  } else if (type === 6) {
    // 当前待响应
    router.push(`/all/safeManage/defect?className=${props.className}&status=UNRESPONSE`);
  } else if (type === 7) {
    // 当前待整改
    router.push(`/all/safeManage/defect?className=${props.className}&status=UNDO`);
  } else if (type === 8) {
    // 当前延期整改
    router.push(`/all/safeManage/defect?className=${props.className}&status=DELAY`);
  }
};
</script>
<style lang="scss" scoped>
.card-content {
  height: 300px;
  width: 100%;
  .stat-groups {
    width: 100%;
    display: flex;
    align-items: center;
    .stat-group {
      display: flex;
      width: 50%;
      height: 100px;
      .stat {
        margin-top: 30px;
        margin-right: 12px;
        width: 40px;
        height: 40px;
        background-size: contain;
        &.stat1 {
          background-image: url("@/assets/images/defect/stat1.png");
        }
        &.stat2 {
          background-image: url("@/assets/images/defect/stat2.png");
        }
        &.stat3 {
          background-image: url("@/assets/images/defect/stat3.png");
        }
        &.stat4 {
          background-image: url("@/assets/images/defect/stat4.png");
        }
        &.stat5 {
          background-image: url("@/assets/images/defect/stat5.png");
        }
        &.stat6 {
          background-image: url("@/assets/images/defect/stat6.png");
        }
      }
      .content {
        margin-top: 24px;
        height: 50px;
        cursor: pointer;
        .title {
          font-size: 14px;
          font-family:
            PingFangSC-Regular,
            PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.8);
        }
        .count {
          font-size: 24px;
          font-family:
            PingFangSC-Medium,
            PingFang SC;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.9);
        }
      }
    }
  }
}
</style>
